<template>
  <div>
    <el-page-header @back="goBack" >
    </el-page-header>
    <br>
    <el-container>
      <el-header height='50px' style="text-align:left;line-height: 10px;">
        <span>心理健康咨询中心概况 >></span>
        <span style="color: #20a0ff"> &nbsp&nbsp{{basicData.centerName}}&nbsp&nbsp&nbsp&nbsp</span>
        <span>负责人:</span>
        <span style="color: #20a0ff"> {{basicData.director}}&nbsp&nbsp&nbsp&nbsp  </span>
        <span>中心总人数:</span>
        <span style="color: #20a0ff"> {{basicData.totalNum}}  </span>
        <span>人&nbsp&nbsp&nbsp&nbsp咨询师人数:</span>
        <span style="color: #20a0ff"> {{basicData.consultantNum}}  </span>
        <span>人</span>
      </el-header>
      <el-container style="justify-content: center;">
        <div style="line-height: 80px;width: 1000px;" >
          <el-row  :gutter="220">
            <el-col :span="4"   >
              <el-card class="box-card" style="width:200px">
                <div style="margin-left:1px;font-size: 22px;height: 40px;text-align: center;">{{ "今日值班人数" }}</div>
                <div style="margin-left:1px;font-size: 18px;height: 40px;margin-bottom:20px;text-align: center;">{{ "5人" }}</div>
              </el-card>
            </el-col>
            <el-col :span="4"   >
              <el-card class="box-card" style="width:200px">
                <div style="margin-left:1px;font-size: 22px;height: 40px;text-align: center;">{{ "今日预约人次" }}</div>
                <div style="margin-left:1px;font-size: 18px;height: 40px;margin-bottom:20px;text-align: center;">{{ "24人次" }}</div>
              </el-card>
            </el-col>
            <el-col :span="4"   >
              <el-card class="box-card" style="width:200px">
                <div style="margin-left:1px;font-size: 22px;height: 40px;text-align: center;">{{ "本月服务人次" }}</div>
                <div style="margin-left:1px;font-size: 18px;height: 40px;margin-bottom:20px;text-align: center;">{{ "480人次" }}</div>
              </el-card>
            </el-col>
            <el-col :span="4"   >
              <el-card class="box-card" style="width:200px">
                <div style="margin-left:1px;font-size: 22px;height: 40px;text-align: center;">{{ "本月服务总时长" }}</div>
                <div style="margin-left:1px;font-size: 18px;height: 40px;margin-bottom:20px;text-align: center;">{{ "400小时" }}</div>
              </el-card>
            </el-col>
            <el-col :span="4"   >
              <el-card class="box-card" style="width:200px">
                <div style="margin-left:1px;font-size: 22px;height: 40px;text-align: center;">{{ "年度服务总时长" }}</div>
                <div style="margin-left:1px;font-size: 18px;height: 40px;margin-bottom:20px;text-align: center;">{{ "3000小时" }}</div>
              </el-card>
            </el-col>
          </el-row>
        </div>
      </el-container>
    </el-container>
    <el-container>

      <span style="color: #20a0ff;text-align:left;height: 25px;margin-left: 20px">用户评测结果分布</span>
      <el-header height='50px' style="text-align:right;line-height: 5px;">
        <i style="margin-left: 730px" class="fa fa-star-o"></i>
        <span style="color: #20a0ff;height: 25px;margin-right: 120px">全校各院系学生评测频次(人次/年)Top</span>
      </el-header>
      <el-container>
        <el-main >

<!--          <div class="bar">-->
<!--            <div id="bar1">-->
<!--              &lt;!&ndash; 为 ECharts 准备一个具备大小（宽高）的 DOM &ndash;&gt;-->
<!--              <div id="main2" style="float:left;width:100%;height: 300px"></div>-->
<!--            </div>-->
<!--          </div>-->

          <div class="pie">
            <div id="pie1">
              <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
              <div id="main1" style="float:left;width:100%;height: 300px"></div>
            </div>
          </div>


<!--          <div class="radar">-->
<!--            <div style="line-height: 50px">&nbsp</div>-->
<!--            <div id="radar1">-->
<!--              &lt;!&ndash; 为 ECharts 准备一个具备大小（宽高）的 DOM &ndash;&gt;-->

<!--              <div id="main3" style="margin-left:60px;float:left;width:370px;height: 300px"></div>-->
<!--              <div id="main4" style="margin-right:60px;float:right;width:300px;height: 300px"></div>-->


<!--            </div>-->
<!--          </div>-->
<!--          <div style="line-height: 100px">&nbsp</div>-->
<!--          <div style="line-height: 50px">&nbsp</div>-->
<!--          <br>-->
          <br>
          <br>
          <div style="line-height: 60px;margin-top: 20px;text-align: left">
            <i style="margin-left: 40px;" class="fa fa-star-o"></i>
            <span   style="font-size: 22px;color: #20a0ff;height: 1px">中心排班情况</span>
<!--            <span style="color: #20a0ff;height: 1px;">中心排班情况</span>-->
          </div>
          <el-card style="width: 780px;margin-left: 30px" align="center">
            <div style="margin-right:10px;line-height: 40px;width: 100%">
              <el-radio-group v-model="consultLabel" v-for="(item) in consultants"  size="small" @change="agreeChange2" fill="#66b1ff">
                <el-radio-button :label="item.id">{{item.name}}</el-radio-button>
              </el-radio-group>

            </div>
            <div style="line-height: 60px">
              <el-table
                :data="scheduleList"
                stripe
                style="width: 100%">
                <el-table-column
                  prop="id"
                  label="序号"
                  width="80">
                </el-table-column>
                <el-table-column
                  prop="college"
                  label="所属院系"
                  width="150">
                </el-table-column>
                <el-table-column
                  prop="number"
                  label="咨询预约编号"
                  width="140">
                </el-table-column>
                <el-table-column
                  prop="label"
                  label="咨询主题"
                  width="80">
                </el-table-column>
                <el-table-column
                  prop="status"
                  label="咨询状态"
                  width="80">
                </el-table-column>
                <el-table-column
                  prop="time"
                  label="预约发起时间"
                  width="180">
                </el-table-column>
              </el-table>
            </div>
          </el-card>


        </el-main>
        <el-aside width="390px" style="line-height: 50px">
<!--          <el-card>-->
<!--            <div>-->
<!--              <el-table-->
<!--                :data="consultantRank"-->
<!--                stripe-->
<!--                style="width: 100%">-->
<!--                <el-table-column-->
<!--                  prop="rank"-->
<!--                  label="排名"-->
<!--                  width="60">-->
<!--                </el-table-column>-->
<!--                <el-table-column-->
<!--                  prop="name"-->
<!--                  label="姓名"-->
<!--                  width="80">-->
<!--                </el-table-column>-->
<!--                <el-table-column-->
<!--                  prop="time"-->
<!--                  label="时长(小时)"-->
<!--                  width="90">-->
<!--                </el-table-column>-->
<!--                <el-table-column-->
<!--                  prop="ratio"-->
<!--                  label="总时长占比"-->
<!--                  width="100">-->
<!--                </el-table-column>-->
<!--              </el-table>-->
<!--            </div>-->
<!--          </el-card>-->
<!--          <div style="margin-left: 20px;line-height: 60px;margin-top: 20px;width: 250px">-->
<!--            <span><i  class="fa fa-star-o"></i></span>-->
<!--            <span style="color: #20a0ff;height: 1px">全校各院系学生评测频次(人次/年)Top</span>-->
<!--          </div>-->
          <el-card>
            <div>
              <el-table
                :data="evaRank"
                stripe
                style="width: 100%">
                <el-table-column
                  prop="id"
                  label="排名"
                  width="80">
                </el-table-column>
                <el-table-column
                  prop="name"
                  label="学院名称"
                  width="120">
                </el-table-column>
                <el-table-column
                  prop="evaNum"
                  label="评测频次"
                  width="120">
                </el-table-column>
              </el-table>
            </div>
          </el-card>
<!--          <div style="margin-right: 250px;line-height: 60px;margin-top: 20px">-->
<!--            <span><i  class="fa fa-star-o"></i></span>-->
<!--            <span style="color: #20a0ff;height: 1px;">重点关注学生</span>-->
<!--          </div>-->
<!--          <el-card>-->
<!--            <div style="margin-left: 170px">-->
<!--              <el-radio-group v-model="stuLabel" size="small" @change="agreeChange" fill="#66b1ff">-->
<!--                <el-radio-button :label="1" >严重</el-radio-button>-->
<!--                <el-radio-button :label="2" >一般</el-radio-button>-->
<!--                <el-radio-button :label="3" >轻微</el-radio-button>-->
<!--              </el-radio-group>-->

<!--            </div>-->
<!--            <div>-->
<!--              <el-table-->
<!--                :data="students"-->
<!--                stripe-->
<!--                style="width: 100%">-->
<!--                <el-table-column-->
<!--                  prop="id"-->
<!--                  label="序号"-->
<!--                  width="60">-->
<!--                </el-table-column>-->
<!--                <el-table-column-->
<!--                  prop="name"-->
<!--                  label="姓名"-->
<!--                  width="80">-->
<!--                </el-table-column>-->
<!--                <el-table-column-->
<!--                  prop="age"-->
<!--                  label="年龄"-->
<!--                  width="60">-->
<!--                </el-table-column>-->
<!--                <el-table-column-->
<!--                  prop="symptom"-->
<!--                  label="症状"-->
<!--                  width="140">-->
<!--                </el-table-column>-->
<!--              </el-table>-->
<!--            </div>-->
<!--          </el-card>-->
        </el-aside>
      </el-container>
    </el-container>
  </div>
</template>

<script>
    export default {
        name: "CenterOperation",
        data() {
            return {
                basicData: {},//基本数据
                satisfaction: {},//饼图满意度
                timeGraph: {},//时间分布柱形图
                radar: {},//心理指标雷达图
                evaRank: [],//学院评测频次数据
                sexRatio: [],//性别圆环图数据
                students: [],//展示的学生列表
                seriousStu: [],//严重的学生
                generalStu: [],//一般的学生
                slightStu: [],//轻微的学生
                stuLabel: 1,//选择展示哪种学生
                consultantRank: [],//心理咨询师时长排行，用于展示心理咨询师图表以及初始化中心排班的心理咨询师表头
                consultants:[],//心理咨询师列表（用于初始化中心排班的多选框表头）
                consultLabel: -1,//心理咨询师Id
                scheduleList: []//排班列表（排班列表等排班接口开发好再完善，现在只能初始化表头）
            };
        },
        watch:{
            satisfaction() {
                this.$nextTick(() => {
                    //此时就可以获取到在created赋值后的dataList了
                    this.initPieEcharts();

                })
            },
            timeGraph() {
                this.$nextTick(() => {
                    //此时就可以获取到在created赋值后的dataList了
                    this.initBarEcharts();

                })
            },
            radar() {
                this.$nextTick(() => {
                    //此时就可以获取到在created赋值后的dataList了
                    this.initRadarEcharts();
                })
            },
            sexRatio() {
                this.$nextTick(() => {
                    //此时就可以获取到在created赋值后的dataList了
                    this.initCircleEcharts();
                })
            },
        },
        created() {
            console.log("centerOperation页面的学校名字:"+this.$route.query.universityName)
            this.initData();
        },
        mounted() {
            // this.initPieEcharts();
            // this.initBarEcharts();
            // this.initRadarEcharts();
            // this.initCircleEcharts();
        },
        methods: {
            initData() {
                var allData
                this.$axios.post("managementSystem/operation/psychologicalConsult", {universityName: this.$route.query.universityName})
                    .then(data => {
                        if (data.status != 200) {
                            this.$message.error('服务出错' + data.status);
                            // this.$message(fgf{
                            //   message:'服务错误',
                            //   type:'warn'
                            // });
                        } else {
                            if (data.data.errorCode == '200') {
                                allData = data.data
                                console.log(allData.errorMsg)

                                //基本数据初始化
                                this.basicData=allData.basicData
                                //this.basicData={"centerName":"华中科技大学心理监控咨询中心","director":"李元元","totalNum":20,"consultantNum":15};

                                //柱形图数据初始化
                                //var d=allData.timeGraph
                                var d=[
                                    {"depress":10,"anxiety":20,"suicide":30,"insomnia":40,"others":50},
                                    {"depress":20,"anxiety":20,"suicide":30,"insomnia":40,"others":50},
                                    {"depress":5,"anxiety":20,"suicide":30,"insomnia":40,"others":50},
                                    {"depress":1,"anxiety":20,"suicide":30,"insomnia":40,"others":50},
                                    {"depress":6,"anxiety":20,"suicide":30,"insomnia":40,"others":50},
                                    {"depress":0,"anxiety":0,"suicide":0,"insomnia":0,"others":0},
                                ];
                                this.timeGraph={"depress":[],"anxiety":[],"suicide":[],"insomnia":[],"others":[]}
                                console.log(this.timeGraph)
                                for(var i=0;i<d.length;i++) {
                                    this.timeGraph["depress"].push(d[i]["depress"])
                                    this.timeGraph["anxiety"].push(d[i]["anxiety"])
                                    this.timeGraph["suicide"].push(d[i]["suicide"])
                                    this.timeGraph["insomnia"].push(d[i]["insomnia"])
                                    this.timeGraph["others"].push(d[i]["others"])
                                }

                                //学院评测频次数据初始化
                                this.evaRank=allData.evaRank
                                // this.evaRank=[{"name":"人工智能学院","evaNum":61256},
                                //     {"name":"计算机学院","evaNum":51120},
                                //     {"name":"软件学院","evaNum":45208},
                                //     {"name":"教育学院","evaNum":67828},
                                //     {"name":"教育学院","evaNum":67828},
                                // ];
                                for (var i in this.evaRank) {
                                    this.evaRank[i]["id"]=parseInt(i)+1;
                                    this.evaRank[i]["evaNum"]=this.evaRank[i]["evaNum"].toString()+"次";

                                }

                                //饼图数据初始化
                                this.satisfaction=[
                                    {value:335, name:'一星评价'},
                                    {value:310, name:'二星评价'},
                                    {value:234, name:'三星评价'},
                                    {value:135, name:'四星评价'},
                                    {value:1548, name:'五星评价'}
                                ]

                                //雷达图数据初始化
                                this.radar={"18":[],"19":[],"20":[]}
                                var radarName=["18","19","20"]
                                // var l=allData.radar
                                var l=[{"depress":30,"anxiety":20,"suicide":30,"insomnia":20,"others":20},
                                    {"depress":20,"anxiety":15,"suicide":20,"insomnia":40,"others":20},
                                    {"depress":30,"anxiety":10,"suicide":30,"insomnia":10,"others":30}
                                ]
                                for(i=0;i<l.length;i++) {
                                    this.radar[radarName[i]].push(l[i]["depress"])
                                    this.radar[radarName[i]].push(l[i]["anxiety"])
                                    this.radar[radarName[i]].push(l[i]["suicide"])
                                    this.radar[radarName[i]].push(l[i]["insomnia"])
                                    this.radar[radarName[i]].push(l[i]["others"])
                                }
                                console.log("radar:",this.radar)

                                //环形图数据初始化
                                this.sexRatio=allData.sexRatio;
                                // this.sexRatio=[5124,3125];

                                //关注学生初始化
                                this.seriousStu=allData.seriousStu;
                                // this.seriousStu=[{"name":"吕国光","age":"22","symptom":"失眠","Intervention":"就医、休学"},
                                //     {"name":"吕国光","age":"22","symptom":"失眠","Intervention":"就医、休学"},
                                //     {"name":"吕国光","age":"22","symptom":"失眠","Intervention":"就医、休学"},
                                //     {"name":"吕国光","age":"22","symptom":"失眠","Intervention":"就医、休学"},
                                //     {"name":"吕国光","age":"22","symptom":"失眠","Intervention":"就医、休学"}]

                                this.generalStu=allData.generalStu;
                                // this.generalStu=[{"name":"lql","age":"24","symptom":"失眠","Intervention":"就医、休学"},
                                //     {"name":"lql","age":"24","symptom":"失眠","Intervention":"就医、休学"},
                                //     {"name":"lql","age":"24","symptom":"失眠","Intervention":"就医、休学"},
                                //     {"name":"lql","age":"24","symptom":"失眠","Intervention":"就医、休学"},
                                //     {"name":"lql","age":"24","symptom":"失眠","Intervention":"就医、休学"}]

                                this.slightStu=allData.slightStu;
                                // this.slightStu=[{"name":"xh","age":"25","symptom":"失眠","Intervention":"就医、休学"},
                                //     {"name":"xh","age":"25","symptom":"失眠","Intervention":"就医、休学"},
                                //     {"name":"xh","age":"25","symptom":"失眠","Intervention":"就医、休学"},
                                //     {"name":"xh","age":"25","symptom":"失眠","Intervention":"就医、休学"},
                                //     {"name":"xh","age":"25","symptom":"失眠","Intervention":"就医、休学"}]

                                this.students=this.seriousStu
                                for (var i in this.students) {
                                    this.students[i]["id"]=parseInt(i)+1;

                                }

                                //中心排班表头初始化（咨询师列表初始化）
                                this.consultantRank=allData.consultantRank;
                                // this.consultantRank=[{"id":1,"name":"咨询师1","time":1250,"ratio":30},{"id":2,"name":"咨询师2","time":1250,"ratio":15},{"id":3,"name":"咨询师3","time":1000,"ratio":10},{"id":4,"name":"咨询师4","time":800,"ratio":10},
                                //     {"id":5,"name":"咨询师5","time":600,"ratio":8},{"id":6,"name":"咨询师6","time":400,"ratio":6},{"id":7,"name":"咨询师7","time":200,"ratio":4}]
                                this.consultants=[{"id":-1,"name":"所有"}]

                                for (var i in this.consultantRank) {
                                    this.consultants.push({"id":this.consultantRank[i]["id"],"name":this.consultantRank[i]["name"]})
                                    this.consultantRank[i]["rank"]=parseInt(i)+1;
                                    this.consultantRank[i]["ratio"]=this.consultantRank[i]["ratio"]+"%";
                                }


                                //初始化排班数据（等开发完排班接口再进行替换）
                                this.scheduleList=[{"college":"人工智能学院","number":"12345678900","label":"失眠","status":"已取消","time":"2018年7月4日16:52:41"},
                                    {"college":"计算机学院","number":"12345678900","label":"烦躁","status":"已取消","time":"2018年7月4日16:52:41"},
                                    {"college":"人工智能学院","number":"12345678900","label":"抑郁","status":"已取消","time":"2018年7月4日16:52:41"},
                                    {"college":"计算机学院","number":"12345678900","label":"不开心","status":"已取消","time":"2018年7月4日16:52:41"},
                                    {"college":"计算机学院","number":"12345678900","label":"失眠","status":"已取消","time":"2018年7月4日16:52:41"},
                                    {"college":"人工智能学院","number":"12345678900","label":"失眠","status":"已取消","time":"2018年7月4日16:52:41"},
                                    {"college":"软件学院","number":"12345678900","label":"失眠","status":"已取消","time":"2018年7月4日16:52:41"},
                                    {"college":"软件学院","number":"12345678900","label":"失眠","status":"已取消","time":"2018年7月4日16:52:41"}]
                                for (var i in this.scheduleList) {
                                    this.scheduleList[i]["id"]=parseInt(i)+1;

                                }
                            }
                        }
                    })
            },

            initBarEcharts(){
                // 实例化echarts对象
                let myChartDrawer = this.$echarts.init(document.getElementById('main2'))

                // 绘制条形图
                var option = {
                    title: {
                        text: '用户评测结果分布',
                        x:'center',//x轴方向对齐方式
                    },
                    legend: {
                        data: ['抑郁', '焦虑',"失眠","自杀","其他"],
                        top: 5,
                        x:'right',//x轴方向对齐方式
                        padding:[30,70,0,0]
                    },
                    // X轴
                    xAxis: {
                        data: [
                            '0:00-4:00', '4:00-8:00', '8:00-12:00', '12:00-16:00', '16:00-20:00', '20:00-24:00'
                        ]
                    },
                    // Y轴
                    yAxis: {},
                    // 数据
                    series: [
                        {
                            name: '抑郁',
                            type: 'bar',
                            data: this.timeGraph["depress"]
                        },
                        {
                            name: '焦虑',
                            type: 'bar',
                            data: this.timeGraph["anxiety"]
                        },
                        {
                            name: '失眠',
                            type: 'bar',
                            data: this.timeGraph["suicide"]
                        },
                        {
                            name: '自杀',
                            type: 'bar',
                            data: this.timeGraph["insomnia"]
                        },
                        {
                            name: '其他',
                            type: 'bar',
                            data: this.timeGraph["others"]
                        },
                    ]
                };

                myChartDrawer.setOption(option);
            },
            initPieEcharts(){
                // 基于准备好的dom，初始化echarts实例
                var myChart = this.$echarts.init(document.getElementById('main1'));
                // 绘制图表
                myChart.setOption({
                    title : {
                        text: '用户使用系统满意度分布',//主标题
                        x:'center',//x轴方向对齐方式
                    },
                    tooltip : {
                        trigger: 'item',
                        formatter: "{a} <br/>{b} : {c} ({d}%)"
                    },
                    legend: {
                        orient: 'vertical',
                        bottom: 'bottom',
                        data: ['一星评价','二星评价','三星评价','四星评价','五星评价']
                    },
                    series : [
                        {
                            name: '访问来源',
                            type: 'pie',
                            radius : '55%',
                            center: ['50%', '60%'],
                            data:this.satisfaction,
                            label: {
                                normal: {
                                    show: true,
                                    formatter: '{b} : {c} ({d}%)'
                                },
                                labelLine: {show: true}
                            },
                            itemStyle: {
                                emphasis: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                });
            },
            initRadarEcharts(){
                let myChartDrawer = this.$echarts.init(document.getElementById('main3'))
                let option = {
                    title: {
                        text: '评测结果心理指标雷达图',
                        x:'center',//x轴方向对齐方式
                        padding:[20,70,0,0]
                    },
                    tooltip: {},
                    legend: {
                        left:"center",
                        top:"bottom",
                        orient:"horizontal",
                        padding:[0,0,0,0],
                        data: ['18', '19','20']
                    },
                    radar: {
                        // shape: 'circle',
                        center: ['50%', '60%'],//调位置
                        radius: 90,//调大小
                        name: {
                            textStyle: {
                                color: '#fff',
                                backgroundColor: '#999',
                                borderRadius: 3,
                                padding: [3, 5]
                            }
                        },
                        axisLine: {
                            lineStyle: {
                                color: 'rgba(131,141,158,.1)',
                            },
                        },
                        indicator: [{
                            name: '抑郁',
                            max:40
                        },
                            {
                                name: '焦虑',
                                max:40
                            },
                            {
                                name: '自杀',
                                max:40
                            },
                            {
                                name: '失眠',
                                max:40
                            },
                            {
                                name: '其他',
                                max:40
                            },
                        ],
                        splitArea: {
                            show: false,
                            areaStyle: {
                                color: 'rgba(255,0,0,0)', // 图表背景的颜色
                            },
                        },
                        splitLine: {
                            show: true,
                            lineStyle: {
                                width: 1,
                                color: 'rgba(131,141,158,.1)', // 设置网格的颜色
                            },
                        },
                    },
                    series: [{
                        name: '雷达图',
                        type: 'radar',
                        // areaStyle: {normal: {}},
                        data: [{
                            value: this.radar["18"],
                            name: '18',
                            itemStyle: {
                                normal: {
                                    color: '#5B8FF9',
                                    lineStyle: {
                                        color: '#5AD8A6',
                                    },
                                },
                            },
                        },
                            {
                                value: this.radar["19"],
                                name: '19',
                                itemStyle: {
                                    normal: {
                                        color: '#5AD8A6',
                                        lineStyle: {
                                            width: 1,
                                            color: 'rgba(60,135,213,.3)',
                                        },
                                    },
                                },
                            },
                            {
                                value: this.radar["20"],
                                name: '20',
                                itemStyle: {
                                    normal: {
                                        color: '#BA55D3',
                                        lineStyle: {
                                            width: 1,
                                            color: 'rgba(60,135,213,.3)',
                                        },
                                    },
                                },
                            }
                        ]
                    }]
                };
                myChartDrawer.setOption(option);
            },
            initCircleEcharts(){
                // 基于准备好的dom，初始化echarts实例
                this.chartPie = this.$echarts.init(document.getElementById('main4'),'macarons');
                this.chartPie.setOption({
                    title: {
                        text: '性别比例',
                        x: 'center',
                        padding:[20,70,0,0]
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: "{a} <br/>{b} : {c} ({d}%)",
                    },
                    legend: {
                        data: ['男', '女',],
                        left:"center",
                        top:"bottom",
                        orient:"horizontal",
                        padding:[0,0,0,0]
                    },
                    series: [
                        {
                            name: '性别比例',
                            type: 'pie',
                            radius: ['50%', '60%'],
                            center: ['50%', '60%'],
                            color:['#20a0ff','#5AD8A6'],
                            data: [
                                {value: this.sexRatio[0], name: '男'},
                                {value: this.sexRatio[1], name: '女'},
                            ],
                            //animationEasing: 'cubicInOut',
                            animationDuration: 2600,

                        }
                    ]
                });
            },
            agreeChange:function(val){
                let that = this
                if(val===1){
                    this.students=this.seriousStu
                }else if(val===2){
                    this.students=this.generalStu
                }else{
                    this.students=this.slightStu
                }
                for (var i in this.students) {
                    this.students[i]["id"]=parseInt(i)+1;

                }
            },
            agreeChange2:function(val){
                console.log("咨询师的值：",val)
            },
            goBack(){
                this.$router.go(-1);
            }
        }

    }
</script>

<style scoped>

</style>
